<script setup>
import { getClassicsMovie } from "../../api/home";
import { onMounted, reactive } from "vue";
import {useRouter} from 'vue-router'
const router = useRouter()
const data = reactive({
    classicsLive:[]
})

onMounted(()=>{
    getClassicsMovie().then(res=>{
        console.log(res);
        data.classicsLive = res.data;
    })
})
const toDetail=(id)=>{
    router.push('/detail?movieId='+id)
}
</script>
<template>
    <div class="movie-info">
        <div class="mi-list">
            <div class="mi-item" 
            v-for="item in data.classicsLive" 
            :key="item.movieId"
            @click="toDetail(item.movieId)"
            >
                <div class="mi-poster">
                    <img :src="item.poster" alt="">
                </div>
                <div class="mi-intro">
                    <div class="info">
                        <h1>{{ item.movieInfo.title }}</h1>
                        <p class="star">{{ item.movieInfo.englishTitle }}</p>
                        <p>{{ item.movieInfo.actors }}</p>
                        <p>{{ item.movieInfo.showInfo }}</p>
                    </div>
                    <div class="score">
                       <span class="">{{ item.score }}</span>
                       </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
::-webkit-scrollbar{
    display: none;
}
.movie-info {
    padding: 15px;

    .mi-list {
        .mi-item {
            display: flex;
            margin-bottom: 10px;

            .mi-poster {
                width: 64px;
                height: 90px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .mi-intro {
                display: flex;
                width: 79%;
                margin-left: 10px;
                justify-content: space-between;
                align-items: center;
                padding: 10px 0;
                border-bottom: 1px solid #f0f0f0;
                position: relative;
                .info {
                    position: absolute;
                    top: 0px;
                    max-width: 75%;
                    h1 {
                        width: 200px;
                        font-size: 17px;
                        color: #333;
                        font-weight: 700;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        word-break: break-all;
                    }

                    p {
                        font-size: 13px;
                        color: #666;
                        margin-top: 7px;

                        span {
                            color: #faaf00;
                            font-weight: 800;
                        }
                    }

                    .star {
    
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        word-break: break-all;
                    }
                }
                .score{
                    width: 70px;
                    height: 77px;
                    right: 0px;
                    position: absolute;
                            span {
                                position: absolute;
                                right: 0px;
                                top: 0px;
                                color: #faaf00;
                            }
                    
                    }
            }
        }
    }
    .blank{
    width: 100%;
    height: 50px;
}
}
</style>
